<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>宝贝盒子 - 六大核心功能模块</title>
  <style>
    :root {
      --primary: #4f46e5;
      --primary-light: #818cf8;
      --secondary: #8b5cf6;
      --accent: #ec4899;
      --text: #1e293b;
      --light: #f8fafc;
      --card-bg: rgba(255, 255, 255, 0.95);
      --shadow: 0 4px 20px rgba(60, 60, 120, 0.15);
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'HarmonyOS Sans', '微软雅黑', Arial, sans-serif;
      background: linear-gradient(135deg, #e0e7ff 0%, #d1d5ff 100%);
      background-attachment: fixed;
      margin: 0;
      padding: 0;
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .header {
      width: 100%;
      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
      padding: 20px 0 0 0;
      text-align: center;
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
      margin-bottom: 0;
    }
    
    .header h1 {
      color: white;
      font-size: 2.2rem;
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .container {
      max-width: 1200px;
      width: 90%;
      margin: 0 auto 40px;
      padding: 30px;
      background: var(--card-bg);
      border-radius: 32px;
      box-shadow: var(--shadow);
      position: relative;
      z-index: 10;
    }
    
    .logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
    }
    
    .logo::before {
      content: '';
      position: absolute;
      width: 180px;
      height: 180px;
      background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.4;
      z-index: -1;
    }
    
    .logo-svg {
      width: 88px;
      height: 88px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .logo-title {
      font-size: 2.2rem;
      font-weight: bold;
      color: var(--primary);
      letter-spacing: 2px;
      margin-bottom: 6px;
      text-shadow: 0 2px 8px rgba(79,70,229,0.08);
    }
    
    .slogan {
      font-size: 1.3rem;
      color: var(--primary);
      font-weight: 600;
      margin-bottom: 18px;
      letter-spacing: 1px;
      text-align: center;
      max-width: 600px;
      line-height: 1.5;
    }
    
    .modules-section {
      margin-bottom: 30px;
    }
    
    .section-title {
      text-align: center;
      font-size: 1.8rem;
      color: var(--primary);
      margin-bottom: 30px;
      position: relative;
      padding-bottom: 15px;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border-radius: 2px;
    }
    
    .modules {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
    }
    
    .module {
      flex: 1 1 360px;
      min-width: 300px;
      background: linear-gradient(160deg, #f0f9ff 0%, #e0e7ff 100%);
      border-radius: 32px;
      box-shadow: 0 3px 16px rgba(90,90,180,0.10);
      padding: 32px 22px 28px 22px;
      position: relative;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      cursor: pointer;
      border: 2px solid rgba(224, 231, 255, 0.6);
      overflow: hidden;
      z-index: 1;
    }
    
    .module::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      z-index: -1;
      transform: translateY(-100%);
      transition: transform 0.4s ease;
      border-radius: 32px 32px 0 0;
    }
    
    .module:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 16px 40px rgba(99,102,241,0.18);
      border-color: var(--primary-light);
      filter: brightness(1.04);
    }
    
    .module:hover::before {
      transform: translateY(0);
    }
    
    .module-icon {
      font-size: 2.8rem;
      margin-bottom: 10px;
      margin-right: 10px;
      display: inline-block;
      vertical-align: middle;
      transition: transform 0.3s ease;
      filter: drop-shadow(0 2px 6px #a5b4fc88);
    }
    
    .module:hover .module-icon {
      transform: scale(1.18) rotate(-6deg);
      filter: drop-shadow(0 4px 12px #818cf8cc);
    }
    
    .module-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 14px;
      color: var(--primary);
      display: flex;
      align-items: center;
      position: relative;
    }
    
    .module-scene {
      background: linear-gradient(90deg, #fef08a, #fef9c3);
      color: #b45309;
      font-size: 1.08rem;
      border-radius: 12px;
      padding: 8px 18px;
      margin-bottom: 18px;
      margin-top: 5px;
      display: inline-block;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .module-features {
      margin-bottom: 8px;
      padding-left: 0;
      color: var(--primary-light);
      font-size: 1.18rem;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      list-style: none;
      width: 100%;
    }
    
    .module-features li {
      background: rgba(224, 231, 255, 0.7);
      border-radius: 14px;
      padding: 10px 20px;
      font-size: 1.18rem;
      display: flex;
      align-items: center;
      min-width: 110px;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(120,120,200,0.10);
      transition: all 0.3s ease;
      border: 1px solid rgba(224, 231, 255, 0.8);
    }
    
    .module:hover .module-features li {
      background: #fff;
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 4px 16px rgba(120,120,200,0.13);
    }
    
    .footer {
      text-align: center;
      margin-top: 40px;
      margin-bottom: 10px;
      width: 100%;
    }
    
    .btn-explore {
      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
      color: white;
      font-size: 1.25rem;
      font-weight: bold;
      border: none;
      border-radius: 32px;
      padding: 16px 54px;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
      margin-bottom: 20px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    
    .btn-explore:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
      filter: brightness(1.08);
    }
    
    .btn-explore:active {
      transform: translateY(0);
      box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
    }
    
    .btn-explore::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: 0.5s;
    }
    
    .btn-explore:hover::after {
      left: 100%;
    }
    
    .copyright {
      color: #64748b;
      font-size: 1rem;
      margin-top: 10px;
    }
    
    /* 详情页样式 */
    .detail-page {
      display: none;
      flex-direction: column;
      align-items: center;
      animation: fadeIn 0.5s;
      padding: 30px;
      background: white;
      border-radius: 28px;
      box-shadow: 0 8px 30px rgba(60,60,120,0.15);
      margin-top: 20px;
      position: relative;
    }
    
    .detail-page::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border-radius: 28px 28px 0 0;
    }
    
    .detail-page.active {
      display: flex;
    }
    
    .detail-icon {
      font-size: 4rem;
      margin-bottom: 20px;
      margin-top: 10px;
      transition: transform 0.5s ease;
      filter: drop-shadow(0 2px 8px #a5b4fc88);
    }
    
    .detail-icon:hover {
      transform: rotate(15deg) scale(1.1);
    }
    
    .detail-title {
      font-size: 1.9rem;
      font-weight: bold;
      color: var(--primary);
      margin-bottom: 15px;
      text-align: center;
      position: relative;
      padding-bottom: 10px;
    }
    
    .detail-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border-radius: 3px;
    }
    
    .detail-desc {
      font-size: 1.15rem;
      color: #475569;
      margin-bottom: 20px;
      text-align: center;
      max-width: 700px;
      line-height: 1.6;
    }
    
    .detail-scene {
      background: linear-gradient(90deg, #fef08a, #fef9c3);
      color: #b45309;
      font-size: 1.05rem;
      border-radius: 10px;
      padding: 8px 20px;
      margin-bottom: 20px;
      margin-top: 5px;
      display: inline-block;
      box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    }
    
    .detail-features {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      list-style: none;
      margin-bottom: 30px;
      justify-content: center;
      padding: 0;
      max-width: 800px;
    }
    
    .detail-features li {
      background: #f1f5f9;
      border-radius: 14px;
      padding: 10px 22px;
      font-size: 1.15rem;
      display: flex;
      align-items: center;
      min-width: 130px;
      justify-content: center;
      box-shadow: 0 3px 8px rgba(120,120,200,0.1);
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }
    
    .detail-features li:hover {
      background: white;
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 5px 15px rgba(120,120,200,0.15);
    }
    
    .btn-back {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      color: white;
      font-size: 1.1rem;
      font-weight: 500;
      border: none;
      border-radius: 24px;
      padding: 10px 36px;
      cursor: pointer;
      margin-top: 10px;
      margin-bottom: 10px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .btn-back:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4);
    }
    
    .btn-back:active {
      transform: translateY(0);
    }
    
    .btn-back::before {
      content: '←';
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @media (max-width: 900px) {
      .container { padding: 16px; }
      .section-title { font-size: 1.4rem; }
      .module { flex: 1 1 100%; }
      .detail-title { font-size: 1.3rem; }
      .detail-desc { font-size: 1.05rem; padding: 0 10px; }
    }
    
    @media (max-width: 600px) {
      .logo-svg { width: 60px; height: 60px; }
      .logo-title { font-size: 1.3rem; }
      .slogan { font-size: 1.05rem; }
      .section-title { font-size: 1.1rem; }
      .module-title { font-size: 1.1rem; }
      .module-icon { font-size: 1.7rem; }
      .module-features { gap: 7px; }
      .module-features li { min-width: 60px; padding: 6px 10px; font-size: 0.95rem; }
      .detail-icon { font-size: 2rem; }
      .detail-title { font-size: 1.1rem; }
      .detail-features { gap: 7px; }
      .detail-features li { min-width: 70px; padding: 6px 10px; font-size: 0.95rem; }
      .btn-explore { padding: 10px 20px; font-size: 1rem; }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>宝贝盒子 · 六大核心功能模块</h1>
  </div>
  
  <div class="container">
    <div class="logo">
      <div class="logo-svg">
        <svg width="72" height="72" viewBox="0 0 72 72" fill="none">
          <rect x="8" y="20" width="56" height="36" rx="10" fill="url(#box)" stroke="#7C3AED" stroke-width="2"/>
          <rect x="16" y="12" width="40" height="16" rx="6" fill="url(#lid)" stroke="#6366F1" stroke-width="2"/>
          <circle cx="36" cy="38" r="6" fill="#FDE68A" stroke="#F59E42" stroke-width="2"/>
          <path d="M36 32 L36 20" stroke="#F59E42" stroke-width="2" stroke-linecap="round"/>
          <g>
            <circle cx="36" cy="10" r="2" fill="#F472B6"/>
            <circle cx="28" cy="14" r="1.5" fill="#F472B6"/>
            <circle cx="44" cy="14" r="1.5" fill="#F472B6"/>
            <circle cx="32" cy="8" r="1" fill="#FDE68A"/>
            <circle cx="40" cy="8" r="1" fill="#FDE68A"/>
          </g>
          <defs>
            <linearGradient id="box" x1="8" y1="20" x2="64" y2="56" gradientUnits="userSpaceOnUse">
              <stop stop-color="#A5B4FC"/>
              <stop offset="1" stop-color="#C4B5FD"/>
            </linearGradient>
            <linearGradient id="lid" x1="16" y1="12" x2="56" y2="28" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0ABFC"/>
              <stop offset="1" stop-color="#A5B4FC"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="logo-title">宝贝盒子</div>
      <div class="slogan">开启你的创意宝盒，发现无限乐趣！</div>
    </div>
    
    <div class="modules-section">
      <h2 class="section-title">核心功能模块</h2>
      <div class="modules">
        <div class="module" onclick="showDetail('cube')">
          <div class="module-title"><span class="module-icon">🧊</span>原子魔方</div>
          <div class="module-scene">桌面卡片 · 宠物互动 · 彩蛋弹窗</div>
          <ul class="module-features">
            <li>🌟 一言</li>
            <li>⏳ 进度条</li>
            <li>🐾 宠物</li>
            <li>🎨 像素头像</li>
          </ul>
        </div>
        
        <div class="module" onclick="showDetail('furnace')">
          <div class="module-title"><span class="module-icon">⚗️</span>创世熔炉</div>
          <div class="module-scene">元素合成 · 光影涂鸦 · 粒子沙盒</div>
          <ul class="module-features">
            <li>🔥+💧=☁️</li>
            <li>🖌️ 光轨</li>
            <li>🪐 粒子实验</li>
          </ul>
        </div>
        
        <div class="module" onclick="showDetail('maze')">
          <div class="module-title"><span class="module-icon">🌀</span>谜域旋廊</div>
          <div class="module-scene">迷宫 · 一笔画 · 连锁反应</div>
          <ul class="module-features">
            <li>⚙️ 齿轮</li>
            <li>🌈 通道</li>
            <li>🌟 一笔画</li>
            <li>💥 连锁</li>
          </ul>
        </div>
        
        <div class="module" onclick="showDetail('gallery')">
          <div class="module-title"><span class="module-icon">🌱</span>奇物收藏馆</div>
          <div class="module-scene">养成 · 盲盒 · 3D图鉴</div>
          <ul class="module-features">
            <li>🌞 演化</li>
            <li>🎲 盲盒</li>
            <li>🏛️ 3D</li>
          </ul>
        </div>
        
        <div class="module" onclick="showDetail('inspire')">
          <div class="module-title"><span class="module-icon">💡</span>脑洞星球</div>
          <div class="module-scene">AI生成 · 文字魔术 · 分支故事</div>
          <ul class="module-features">
            <li>🌳 分支</li>
            <li>🎨 插画</li>
            <li>📝 变形</li>
          </ul>
        </div>
        
        <div class="module" onclick="showDetail('sync')">
          <div class="module-title"><span class="module-icon">🔗</span>次元穿梭机</div>
          <div class="module-scene">多端同步 · 协作创作</div>
          <ul class="module-features">
            <li>📱💻 同步</li>
            <li>🤝 协作</li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <button class="btn-explore"><span style="font-size:1.3em;vertical-align:middle;">🎁</span> 立即体验宝贝盒子</button>
      <div class="copyright">© 2024 宝贝盒子 BabyBox. All Rights Reserved.</div>
    </div>
    
    <!-- 详情页们 -->
    <div id="detail-cube" class="detail-page">
      <div class="detail-icon">🧊</div>
      <div class="detail-title">原子魔方</div>
      <div class="detail-desc">多功能桌面卡片，集今日一言、专注进度、宠物互动与像素头像入口于一体。每日彩蛋与动效，点亮你的每一天！</div>
      <div class="detail-scene">早晨点开卡片，获得哲理短句和宠物互动，开启元气一天！</div>
      <ul class="detail-features">
        <li>🌟 今日一言</li>
        <li>⏳ 摸鱼进度条</li>
        <li>🐾 桌面宠物互动</li>
        <li>🎨 像素头像入口</li>
        <li>✨ 粒子动画彩蛋</li>
      </ul>
      <button class="btn-back" onclick="backHome()">返回首页</button>
    </div>
    
    <div id="detail-furnace" class="detail-page">
      <div class="detail-icon">⚗️</div>
      <div class="detail-title">创世熔炉</div>
      <div class="detail-desc">无限融合工坊，体验128种元素合成公式，手指滑动生成光轨，粒子物理实验激发你的科学灵感。</div>
      <div class="detail-scene">滑动屏幕，创造独特光轨和神秘新元素，成为小小科学家！</div>
      <ul class="detail-features">
        <li>🔥+💧=☁️ 元素合成</li>
        <li>🖌️ 光影涂鸦</li>
        <li>🪐 粒子沙盒</li>
        <li>🌪️ 隐藏彩蛋</li>
      </ul>
      <button class="btn-back" onclick="backHome()">返回首页</button>
    </div>
    
    <div id="detail-maze" class="detail-page">
      <div class="detail-icon">🌀</div>
      <div class="detail-title">谜域旋廊</div>
      <div class="detail-desc">三重迷宫挑战，齿轮迷城、霓虹通道与星河一笔画，体验动态解谜与连锁反应的乐趣。</div>
      <div class="detail-scene">挑战旋转迷宫，画出一笔通关路径，解锁全屏特效！</div>
      <ul class="detail-features">
        <li>⚙️ 齿轮迷城</li>
        <li>🌈 霓虹通道</li>
        <li>🌟 一笔画</li>
        <li>💥 连锁反应</li>
      </ul>
      <button class="btn-back" onclick="backHome()">返回首页</button>
    </div>
    
    <div id="detail-gallery" class="detail-page">
      <div class="detail-icon">🌱</div>
      <div class="detail-title">奇物收藏馆</div>
      <div class="detail-desc">生态养成与盲盒收集，打造专属数字花园，旋转3D图鉴，收集稀有像素植物与机械建筑。</div>
      <div class="detail-scene">种下种子，抽取盲盒，收集稀有像素植物！</div>
      <ul class="detail-features">
        <li>🌞 生态演化</li>
        <li>🎲 盲盒抽卡</li>
        <li>🏛️ 3D藏宝阁</li>
        <li>🖼️ 设计故事</li>
      </ul>
      <button class="btn-back" onclick="backHome()">返回首页</button>
    </div>
    
    <div id="detail-inspire" class="detail-page">
      <div class="detail-icon">💡</div>
      <div class="detail-title">脑洞星球</div>
      <div class="detail-desc">AI内容工坊，输入关键词生成微小说、插画和趣味文本，体验多线叙事与文字魔术。</div>
      <div class="detail-scene">输入"宇航员+鲸鱼"，一键生成专属AI故事和插画！</div>
      <ul class="detail-features">
        <li>🌳 多线分支</li>
        <li>🎨 AI插画</li>
        <li>📝 文字变形</li>
        <li>🔮 emoji谜语</li>
      </ul>
      <button class="btn-back" onclick="backHome()">返回首页</button>
    </div>
    
    <div id="detail-sync" class="detail-page">
      <div class="detail-icon">🔗</div>
      <div class="detail-title">次元穿梭机</div>
      <div class="detail-desc">多设备无缝同步，协作创作，好友碰一碰传输彩蛋，数据全端同步。</div>
      <div class="detail-scene">手机解锁新图鉴，平板自动同步，和好友碰一碰分享创意！</div>
      <ul class="detail-features">
        <li>📱💻 多端同步</li>
        <li>🤝 协作创作</li>
        <li>🎁 彩蛋传输</li>
      </ul>
      <button class="btn-back" onclick="backHome()">返回首页</button>
    </div>
  </div>
  
  <script>
    function showDetail(key) {
      document.querySelector('.modules-section').style.display = 'none';
      document.querySelector('.footer').style.display = 'none';
      [
        'cube','furnace','maze','gallery','inspire','sync'
      ].forEach(k => {
        document.getElementById('detail-' + k).classList.remove('active');
      });
      document.getElementById('detail-' + key).classList.add('active');
      document.getElementById('detail-' + key).scrollIntoView({ behavior: 'smooth' });
    }
    
    function backHome() {
      document.querySelector('.modules-section').style.display = '';
      document.querySelector('.footer').style.display = '';
      [
        'cube','furnace','maze','gallery','inspire','sync'
      ].forEach(k => {
        document.getElementById('detail-' + k).classList.remove('active');
      });
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
    
    document.querySelectorAll('.module').forEach(module => {
      module.addEventListener('click', function() {
        this.style.animation = 'scaleIn 0.4s forwards';
        setTimeout(() => { this.style.animation = ''; }, 400);
      });
    });
  </script>
</body>
</html>